require("./CourseInfoEdit.scss")

require("../../both/base")

import Popup from "../../both/Popup/Popup.jsx"

const majors = ["嵌入式","Web","Android","IOS","UI"]

class CourseInfoEdit extends React.Component {
    constructor(props) {
        super(props)

        const {course,init,courseId} = props

        init(courseId)

        this.state = {
            modalState : false,
            title : course.title,
            description : course.description,
            cover : course.cover,
            major : majors[majors.indexOf(course.major)],

            confirmState : false,
            confirmHint : ""
        }

    }

    directConfirm(e){
        var li = e.target
        var lists = li.parentNode.childNodes
        var idx = Array.prototype.indexOf.call(lists,li)

        this.setState({
            major : majors[idx]
        })
    }

    showModal(){
        this.setState({
            modalState : true
        })
    }

    hideModal(){
        this.setState({
            modalState : false
        })
    }

    // 确认按钮
    onOk(){
        const {setCourse,course} = this.props

        if(this.state.description == "" || this.state.title == ""){
            toastr.warning("标题或课程简介不能为空")
            return
        }

        var courseObj = {
            title : this.state.title,
            description : this.state.description,
            cover : this.state.cover,
            major : this.state.major,
            location : course.location,
            id : course.id,
            createdAt : course.createdAt,
            updatedAt : course.updatedAt
        }

        setCourse(courseObj)
        this.hideModal()

        toastr.success("修改成功")
    }

    titleInputChange(e){
        this.setState({
            title : e.target.value
        })
    }

    descriptionChange(e){
        this.setState({
            description : e.target.value
        })
    }

    delCourseWrap(){
        var self = this
        const { delCourse,course } = this.props
        if(confirm("确认删除吗？删除后数据和视频文件不可恢复")){
            delCourse(course.id,course.location)
        }
    }

    componentDidMount(){
        var self = this
        var uploader = this.uploader = WebUploader.create({
            auto: true,
            pick: '#filePicker',
            server: `${location.protocol}//${location.hostname}:${location.port}/postFile`,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*',
            }
        })

        uploader.on( 'uploadSuccess', function( file, res) {
            toastr.success("图片上传成功")
            self.setState({
                cover : res.url
            })
        })

        uploader.on( 'uploadError', function( file ) {
            toastr.error("图片上传失败")
        })
    }

    componentWillReceiveProps(nextProps){
        const {course} = nextProps

        var isEmptyObj = true
        for(var k in course){
            isEmptyObj = false
        }
        if(isEmptyObj){
            return
        }

        this.setState({
            title : course.title,
            description : course.description,
            cover : course.cover,
            major : course.major
        })
    }

    render() {
        const self = this
        const directConfirm = this.directConfirm.bind(this)
        const showModal = this.showModal.bind(this)
        const hideModal = this.hideModal.bind(this)
        const onOk = this.onOk.bind(this)
        const titleInputChange = this.titleInputChange.bind(this)
        const descriptionChange = this.descriptionChange.bind(this)
        const delCourseWrap = this.delCourseWrap.bind(this)

        const {course,setCourse} = this.props

        var createDate = new Date(course.createdAt)
        createDate = createDate.getUTCFullYear() + "/"
            + (parseInt(createDate.getUTCMonth()) + 1) + "/"
            + createDate.getUTCDate()

        var modifyDate = new Date(course.updatedAt)
        modifyDate = modifyDate.getUTCFullYear() + "/"
            + (parseInt(modifyDate.getUTCMonth()) + 1) + "/"
            + modifyDate.getUTCDate()

        return (
            <div className="course_info_edit_cr bln">
                <div className="course_info_header">
                    <div className="course_info_title">
                        课程信息
                    </div>
                    <div className="operate">
                        <a href="javascript:void(0)" onClick={showModal}>修改</a>
                        <a href="#" className="danger" onClick={delCourseWrap}>删除</a>
                    </div>
                </div>
                <ul className="info_list">
                    <li><span className="label">课程Id</span><span className="content">{course.id}</span></li>
                    <li><span className="label">名称</span><span className="content">{course.title}</span></li>
                    <li><span className="label">简介</span><span className="content">{course.description}</span></li>
                    <li><span className="label">封面图片</span><span className="content">
                        <img src={course.cover} alt="封面" className="cover"/>
                    </span></li>
                    <li><span className="label">专业方向</span><span className="content">{course.major}</span></li>
                    <li><span className="label">创建日期</span><span className="content">{createDate}</span></li>
                    <li><span className="label">修改日期</span><span className="content">{modifyDate}</span></li>
                </ul>
                <Popup show={this.state.modalState} title="课程信息管理" onCancel={hideModal} onOk={onOk}>
                    <div className="modal_course_info_edit">
                        <ul className="modal_lists">
                            <li>
                                <span className="item_title">课程名称</span>
                                <span className="edit_area"><input type="text" className="input_edit_item" value={this.state.title} onChange={titleInputChange} /></span>
                            </li>
                            <li>
                                <span className="item_title">课程简介</span>
                                <span className="edit_area"><textarea type="text" className="input_edit_item" value={this.state.description} onChange={descriptionChange}/></span>
                            </li>
                            <li>
                                <span className="item_title">
                                    封面图片
                                </span>
                                <span className="edit_area">
                                    <div className="img_op_cr verticle_middle_wr">
                                        <img className="img_thumb"
                                             src={this.state.cover}
                                             alt="pic"/>
                                        <div className="img_mask_op">
                                            <div className="img_op">
                                                <div className="btn btn-primary" id="filePicker">
                                                    替换
                                                </div>
                                                {/*<div className="btn btn-danger">删除</div>*/}
                                            </div>
                                            <div className="img_mask"></div>
                                        </div>
                                    </div>
                                </span>
                            </li>
                            <li>
                                <span className="item_title">
                                    专业方向
                                </span>
                                <span className="edit_area">
                                    <div className="btn_group">
                                        <ul className="ul_filter" id="ul_filter" onClick={directConfirm}>
                                            {majors.map((e,i) => {
                                                return (
                                                    <li key={i} className={majors.indexOf(self.state.major) == i ? "cur" : ""}>{e}</li>
                                                )
                                            })}
                                        </ul>
                                    </div>
                                </span>
                            </li>
                            <li></li>
                        </ul>
                    </div>
                </Popup>
            </div>
        )
    }
}

export default CourseInfoEdit